﻿@page "/Grid/Columns/ColumnChooser"
@layout DataProviderAccessArea<INwindDataProvider>

<DemoPageSectionComponent Id="Grid-Columns-ColumnChooser" ShowHorizontalScrollBar="true" ShowSizeMode="true">
    <ChildContentWithParameters Context="Params">
        @inject NwindDataService NwindDataService
        <style>
            .dxbl-grid {
                height: 522px;
            }
        </style>
        <DxGrid @ref="Grid" Data="Data" SizeMode="Params.SizeMode"
            ColumnResizeMode="GridColumnResizeMode.NextColumn" TextWrapEnabled="false"
            PageSize="20">
            <Columns>
                <DxGridDataColumn FieldName="ContactName" MinWidth="100" />
                <DxGridDataColumn FieldName="ContactTitle" MinWidth="100" />
                <DxGridDataColumn FieldName="CompanyName" MinWidth="100" />
                <DxGridDataColumn FieldName="City" Width="10%" MinWidth="80" />
                <DxGridDataColumn FieldName="Country" Width="10%" MinWidth="80" />
                <DxGridDataColumn FieldName="Phone" Width="15%" MinWidth="80" Visible="false" />
            </Columns>
             <ToolbarTemplate>
                <DxToolbar ItemRenderStyleMode="ToolbarRenderStyleMode.Contained" SizeMode="Params.SizeMode">
                    <Items>
                        <DxToolbarItem Alignment="ToolbarItemAlignment.Right" Text="Column Chooser" RenderStyle="ButtonRenderStyle.Secondary" IconCssClass="grid-icon-column-chooser" Click="ColumnChooserButton_Click" />
                    </Items>
                </DxToolbar>
            </ToolbarTemplate>
        </DxGrid>
    </ChildContentWithParameters>

    @code {
        IGrid Grid { get; set; }
        object Data { get; set; }

        protected override async Task OnInitializedAsync() {
            Data = await NwindDataService.GetSuppliersAsync();
        }

        void ColumnChooserButton_Click() {
            Grid.ShowColumnChooser();
        }
    }
</DemoPageSectionComponent>
